<template>
  <div class="environment-info container-bottom-20">
        <CardBox title="设备列表"></CardBox>
        <div class="content-container">
          <div class="device-list-layout" @click.self="showMoreMenu = false">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">{{selectDeviceName}}</el-menu-item>
            </el-menu>
            <div class="more-menu">
              <img src="@/assets/img/device-list-more.png" alt="" @click.stop="toggleMenu">
              <div class="device-list-more" v-show="showMoreMenu" @click.stop>
                <div class="device-list-more-item-title">设备名称</div>
                <div class="device-list-more-item-list">
                  <div class="device-list-more-item" v-for="(item,index) in hezeList" @click="handleSelect(index,item)" :key="index">{{item.localName}}</div>
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="device-list-content">
              <div class="device-list-content-item">
                <div class="device-list-content-item-title" v-for="item in itemList" :key="item.name">
                  <span class="device-list-content-item-title-text">{{item.name}}</span>
                  <span class="device-list-content-item-title-value fonts-DIN">{{item.value}}</span>
                </div>
              </div>
              <div class="device-list-content-item">
                <div class="species-chart" ref="speciesChart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>            
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'
import { EventBus } from '../../utils/event-bus'
export default {
  components: {
    CardBox
  },
  data() {
    return {
      type:"hongwai",
      hezeList:null,
      selectDeviceName:null,
      selectId:0,
      itemList:null,
      activeIndex: '1',
      showMoreMenu: false
    }
  },
  created() {
    EventBus.$on('sent-device-id-to-right', (message) => {
      if(message&&this.hezeList){
        for (let i = 0; i < this.hezeList.length ; i++) {
          if(message.id==this.hezeList[i].id){
            this.selectId=i;
            this.selectDeviceName=this.hezeList[i].localName;
            this.itemList=this.hezeList[i].items;
            this.initSpeciesChart();
          }
        }
      }
    });
    // EventBus.$on('set-device-type', (message) => {
    //   this.type=message;
    //   this.getData();
    // })
  },
  watch: {
    '$route.query': {
      handler(newQuery, oldQuery) {
        // 当路由的query参数发生变化时，执行这里的代码
        console.log('New query:', newQuery);
        console.log('Old query:', oldQuery);
        this.type=newQuery.deviceType;
        this.getData();
      },
      deep: true, // 设置为true以深度观察对象内部的变化
      immediate: true // 组件创建时立即执行一次
    }
  },
  mounted() {
    this.type=this.route.query.deviceType;
    document.addEventListener('click', this.handleClickOutside)
    this.$nextTick(() => {
      // this.getData();
    })
  },
  methods: {
    getData(){
      this.$api.species.getDeviceList(this.type).then(res => {
        this.hezeList = res;
        setTimeout(() => {
          this.itemList=this.hezeList[0].items;
          this.selectDeviceName=this.hezeList[0].localName;
          this.initSpeciesChart();
          EventBus.$emit('sent-device-id-to-right', this.hezeList[0])
        }, 1000);
      });
    },
    handleSelect(index,item) {
      this.selectId=index;
      this.itemList=item.items;
      this.selectDeviceName=item.localName;
      this.showMoreMenu = false;
      this.initSpeciesChart();
      // 在方法中发送事件
      EventBus.$emit('sent-device-id-to-right', item)
    },
    toggleMenu() {
      this.showMoreMenu = !this.showMoreMenu;
    },
    handleClickOutside(event) {
      if (this.showMoreMenu && !event.target.closest('.more-menu')) {
        this.showMoreMenu = false;
      }
    },
    initSpeciesChart() {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      const xData=[];
      const yData=[];
      for (let i = 0; i < this.hezeList[this.selectId].datas.length; i++) {
        xData.push(this.hezeList[this.selectId].datas[i].value);
        yData.push(this.hezeList[this.selectId].datas[i].name);
      }

      const option = {
        title: {
          subtext: "Top5物种",
          top: -12,
          left: 'center',
          subtextStyle: {
            color: "#fff",
            fontSize: 15,
            position: "top",
            fontFamily: "DIN Pro",
          },
        },
        backgroundColor: "transparent",
        grid: {
          left: "5%",
          right: "5%",
          top: "15%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          type: "category",
          data: yData,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.3)",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            interval: 0,
            rotate: 0,
            formatter: function (value) {
              return value.length > 4 ? value.slice(0, 4) + '...' : value;
            }
          },
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.3)",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,24,106,0.9)",
          borderColor: "rgba(0,150,255,0.3)",
          textStyle: {
            color: "#fff",
            fontFamily: "DIN Pro",
          },
          formatter: function (params) {
            const data = params[0];
            return `${data.name}: ${data.value}`;
          },
        },
        series: [
          {
            data: xData,
            type: "bar",
            barWidth: "40%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#25CDE9" },
                { offset: 1, color: "rgba(37, 205, 233, 0.1)" },
              ]),
            },
            label: {
              show: true,
              position: "right",
              color: "#fff",
              fontSize: 12,
              fontFamily: "DIN Pro",
            },
          },
        ],
      };
      chart.setOption(option)
    
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  }
}
</script>

<style scoped lang="scss">
.device-list-layout {
  padding: 10px 20px;
  height: 242px;
  position: relative;
  ::v-deep(.el-menu){
    background: none;
    cursor: pointer;
    border-bottom: none;
  }
  ::v-deep(.el-menu-item),
  ::v-deep(.el-submenu){
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: #fff;
      background: none;
      border-bottom: none;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):hover){
      background: none;
      color: #07FFE5;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):focus){
      background: none;
      color: #07FFE5;
    }
  ::v-deep(.el-menu-item.is-active){
    color: #07FFE5;
    border-bottom: none;
    background: none;
  }
  .line{
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(55, 185, 255, 1), rgba(63, 182, 255, 0.3569),rgba(67, 180, 255, 0));
    position: relative;
    top: -10px;
  }
  .more-menu {
    position: relative;
    top: -25px;
    left: 451px;
    width: 16px;
    height: 16px;
  }
  .device-list-more {
    position: absolute;
    top: 0;
    left: 50px;
    color:#fff;
    font-size: 14px;
    background:rgba(13, 45, 111, 0.4);
    padding:10px 0 10px 24px;
    width: 184px;
    height: 238px;
  }
  .device-list-more-item-list{
    overflow-y: scroll;
    height: 208px;
    .device-list-more-item{
      line-height: 30px;
      height: 30px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .device-list-more-item:hover{
      color: #07FFE5;
      cursor: pointer;
    }
  }
  .device-list-content{
    display: flex;
    justify-content: space-between;
  }
  .device-list-content-item:nth-child(1){
    width: 160px;
  }
  .device-list-content-item:nth-child(2){
    flex: 1;
  }
  .device-list-content-item-title{
    font-size: 16px;
    line-height: 30px;
  }
  .device-list-content-item-title-text{
    color: #fff;
    width: 100px;
    display: inline-block;
    font-size: 12px;
  }
  .device-list-content-item-title-value{
    color: #07FFE5;
    width: 55px;
    display: inline-block;
    font-size: 12px;
  }
}

.device-list-content-item {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

.species-chart {
  width: 100%;
  height: 100%;
}
</style>

